<script setup>
const props = defineProps({
  bannerList: Object,
});
console.log(props.bannerList);
</script>

<template>
  <div class="banner-warp">
    <el-carousel height="500px" class="banner">
      <el-carousel-item v-for="item in props.bannerList" :key="item.id" class="img-warp">
        <a :href="item.hrefUrl">
          <img :src="item.imgUrl" />
        </a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style scope lang="scss">
.banner-warp {
  width: 1240px;
  margin: 0 auto;
  height: 500px;
  // background-color: pink;

  .banner {
    width: 100%;
    height: 100%;
    // background-color: red;

    .img-warp {
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

}
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-carousel__button {
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
</style>
